<template>
  <div class="dashboard-container">
    <el-row :gutter="15">
      <el-col :span="8">
        <div class="bg-white small-border-2">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>快捷方式</el-breadcrumb-item>
          </el-breadcrumb>
          <el-divider></el-divider>
          <div class="member-list">
            <el-link
              :underline="false"
              class="member-item"
              v-for="item in memberList"
              :key="item.title"
              style="width: 24.5%"
              @click="handlePageTo(item.linkUrl)">
              <a class="icon-list">
                <svg-icon :icon-class="item.icon" />
              </a>
              <p>{{ item.title }}</p>
            </el-link>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="bg-white small-border-2">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>待办事项</el-breadcrumb-item>
          </el-breadcrumb>
          <el-divider></el-divider>
          <div class="member-list todolist">
            <el-link
              :underline="false"
              class="member-item"
              v-for="(item, index) in todoList"
              :key="item.title"
              style="width: 48.5%"
              @click="handlePageTo(item.linkUrl)">
              <p>{{ item.title }}</p>
              <b v-if="index == 0">{{ user.productCommentsCount }}</b>
              <b v-else-if="index == 1">{{ user.productCountAll }}</b>
              <b v-else-if="index == 2">{{ user.productCount }}</b>
              <b v-else>{{ user.sellerApplyCount }}</b>
            </el-link>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="bg-white small-border-2">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>版本信息</el-breadcrumb-item>
          </el-breadcrumb>
          <el-divider></el-divider>
          <el-table
            :data="tableData"
            border
            :show-header="false"
            style="width: 100%">
            <el-table-column
              prop="lable"
              label="日期"
              width="100"></el-table-column>
            <el-table-column show-overflow-tooltip prop="title" label="姓名">
              <template slot-scope="scope">
                <el-button v-if="scope.row.title == ''" type="danger">
                  <el-link
                    target="_blank"
                    :underline="false"
                    href="http://www.yixiekeji.com"
                    style="color: #fff">
                    获取授权
                  </el-link>
                </el-button>
                <span v-else>{{ scope.row.title }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="bg-white small-border-2">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>数据概览</el-breadcrumb-item>
          </el-breadcrumb>
          <el-divider></el-divider>
          <yxkj-chart :dataJson="dataJson" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="bg-white small-border-2">
          <el-breadcrumb>
            <el-breadcrumb-item>交易总金额</el-breadcrumb-item>
          </el-breadcrumb>
          <el-divider></el-divider>
          <div class="front-cardlist">
            <p class="big-font">{{ user.orderAllMoney }}</p>
            <p>
              本月新增
              <span class="span-color">
                {{ user.orderMonthMoney }}
                <svg-icon
                  class="icon-smiley"
                  width="16"
                  height="16"
                  icon-class="smiley" />
              </span>
            </p>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="bg-white small-border-2">
          <el-breadcrumb>
            <el-breadcrumb-item>总订单</el-breadcrumb-item>
          </el-breadcrumb>
          <el-divider></el-divider>
          <div class="front-cardlist">
            <p class="big-font">{{ user.orderCount }}</p>
            <p>
              未付款的订单
              <span class="span-color">
                {{ user.orderCount1 }}
                <svg-icon
                  class="icon-smiley"
                  width="16"
                  height="16"
                  icon-class="smiley" />
              </span>
            </p>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="bg-white small-border-2">
          <el-breadcrumb>
            <el-breadcrumb-item>商品总数</el-breadcrumb-item>
          </el-breadcrumb>
          <el-divider></el-divider>
          <div class="front-cardlist">
            <p class="big-font">{{ user.productCountAll }}</p>
            <p>
              商品总数
              <span class="span-color">
                {{ user.productCount }}
                <svg-icon
                  class="icon-smiley"
                  width="16"
                  height="16"
                  icon-class="smiley" />
              </span>
            </p>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="bg-white small-border-2">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>
              <a
                style="border-bottom: 2px solid #5fb878; padding-bottom: 9px"
                href="javascript:void(0)">
                新增用户
              </a>
            </el-breadcrumb-item>
          </el-breadcrumb>
          <el-divider></el-divider>
          <el-table :data="addUserList" border fit style="width: 100%">
            <el-table-column
              type="index"
              width="50"
              align="center"></el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="name"
              label="用户名"></el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="mobile"
              label="手机号"></el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="registerTime"
              label="注册时间"></el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getList" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="bg-white small-border-2">
          <el-breadcrumb>
            <el-breadcrumb-item>产品动态</el-breadcrumb-item>
          </el-breadcrumb>
          <el-divider></el-divider>
          <el-button type="danger" style="width: 100%; height: 50px">
            <el-link
              target="_blank"
              :underline="false"
              href="http://www.yixiekeji.com"
              style="color: #fff">
              易写科技官网
            </el-link>
          </el-button>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="bg-white small-border-2">
          <el-breadcrumb>
            <el-breadcrumb-item>公司简介</el-breadcrumb-item>
          </el-breadcrumb>
          <el-divider></el-divider>
          <!-- <div class="card-text">

            <p>B2B2C是一种电子商务类型的网络购物商业模式，B是BUSINESS的简称，C是CUSTOMER的简称，第一个B指的是商品或服务的供应商，第二个B指的是从事电子商务的企业，C则是表示消费者。
第一个BUSINESS，并不仅仅局限于品牌供应商、影视制作公司和图书出版商，任何的商品供应商或服务供应商都能成为第一个BUSINESS；第二B是B2B2C模式的电子商务企业，通过统一的经营管理对商品和服务、消费者终端同时进行整合，是广大供应商和消费者之间的桥梁，为供应商和消费者提供优质的服务，是互联网电子商务服务供应商。C表示消费者，在第二个B构建的统一电子商务平台购物的消费者；</p>
          </div> -->
          <div class="card-text">
            <p>
              北京易写科技有限公司是国内最专注的电商服务的软件公司，公司位于北京市，是一家拥有自主知识产权的高新科技公司，并相聚获得中关村高新、国家高新认证。
            </p>
            <p>
              北京易写科技有限公司旗下B2B2C、B2C、B2B、O2O拥有自主的知识产权。公司定位中高端电子商务提供商、最适合二次开发的电子商务系统。
            </p>
            <p>
              核心成员均来自一线互联网电商公司，有阿里、京东、海尔电商等工作经历，对互联网、电子商务有深刻理解，有着丰富的电商运营经验，具有大型电商平台架构和技术开发经验。
            </p>
            <p>
              旗下采用Java作为开发语言，结合团队在阿里、京东、海尔电商的实际开发经验，不断开发完善，产品从丰富产品功能、提升用户体验、优化系统性能等方法入手，经过多次升级改版，多次为大型集团公司定制开发，受到客户一致好评。
            </p>
            <p>
              我们的客户有国家电网、中信集团、PICC、中交建、自然堂、报喜鸟、哈哈镜、快成物流等。
            </p>
            <p>
              —— 易写科技（
              <el-link
                href="http://www.yixiekeji.com"
                target="_blank"
                type="primary">
                www.yixiekeji.com
              </el-link>
              ）
            </p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { chinaorderJsonList, fetchMemberListList } from "@/api/all";
import YxkjChart from "@/components/Charts/YxkjChart";
import Pagination from "@/components/Pagination";
import user from "@/store/modules/user";
export default {
  name: "Dashboard",
  components: { YxkjChart, Pagination },
  data() {
    return {
      currentRole: "adminDashboard",
      dataJson: [],
      memberList: [
        { title: "会员管理", icon: "member", linkUrl: "/peoples/memberlist" },
        { title: "全国订单", icon: "orders", linkUrl: "/report/chinaorder" },
        {
          title: "订单概况",
          icon: "template",
          linkUrl: "/report/orderOverview",
        },
        { title: "文章管理", icon: "file", linkUrl: "/news/newslist" },
        {
          title: "索引初始化",
          icon: "findfill",
          linkUrl: "/search/searchIndexes",
        },
        { title: "在售商品", icon: "gift", linkUrl: "/product/listonsale" },
        {
          title: "待售商品",
          icon: "waitsale",
          linkUrl: "/product/listwaitsale",
        },
        {
          title: "会员评价",
          icon: "survey",
          linkUrl: "/product/productcommentslist",
        },
      ],
      todoList: [
        { title: "全部评论", linkUrl: "/product/productcommentslist" },
        { title: "在售商品", linkUrl: "/product/listonsale" },
        { title: "待售商品", linkUrl: "/product/listwaitsale" },
        { title: "商家申请", linkUrl: "/seller/sellerapplylist" },
      ],
      tableData: [
        { lable: "当前版本", title: "易写科技B2B2C多商家商城系统V6.0" },
        { lable: "基于框架", title: "SpringCloud" },
        { lable: "主要特色", title: "适合二次开发/代码质量高/功能完善" },
        { lable: "获取渠道", title: "", type: 1 },
      ],
      addUserList: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
      },
    };
  },
  computed: {
    ...mapGetters(["user"]),
  },
  created() {
    chinaorderJsonList().then((res) => {
      for (let i in res.data.data) {
        this.dataJson.push(res.data.data[i]);
      }
    });
    // 获取新增用户
    this.getList();
  },
  methods: {
    getList() {
      fetchMemberListList(this.listQuery).then((res) => {
        this.addUserList = res.data.rows;
        this.total = res.data.total;
      });
    },
    handlePageTo(url) {
      this.$router.push({ path: url });
    },
  },
};
</script>
<style lang="scss" scoped>
li {
  list-style: none;
}
.dashboard-container {
  background-color: #f0f2f5;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

[class*="el-col-"] .bg-white {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 15px;
}
.small-border-2 {
  border-radius: 2px;
  box-shadow: 0 0px 9px 0 rgb(0 0 0 / 1%);
}

.el-divider--horizontal {
  margin: 12px 0;
}

.el-button {
  margin: 1.5px 0;
}

.card-panel-icon {
  font-size: 48px;
}
.member-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .member-item {
    text-align: center;
    margin-bottom: 10px;
    ::v-deep .el-link--inner {
      width: 92%;
    }
    .icon-list {
      margin-bottom: 1px;
      display: inline-block;
      width: 100%;
      height: 60px;
      line-height: 60px;
      background-color: #f8f8f8;
    }
    .svg-icon {
      font-size: 30px;
    }
    p {
      color: #666;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      font-size: 14px;
      margin: 5px 0;
    }
  }
}
.todolist {
  .member-item {
    background-color: #f8f8f8;
    color: #999;
    text-align: left;
    justify-content: left;
    padding: 10px 15px;
    p {
      padding-bottom: 10px;
      font-size: 12px;
      color: rgb(153, 153, 153);
    }
    b {
      font-style: normal;
      font-size: 30px;
      font-weight: 300;
      color: #009688;
    }
  }
}
.index-bottom-15 {
  background: #fff;
  margin: 15px 0 0;
  padding: 15px;
}
.flex {
  display: flex;
  justify-content: space-between;
}
.front-cardlist {
  line-height: 24px;
  position: relative;
  font-size: 14px;
  p {
    margin: 0;
  }
  .big-font {
    font-size: 36px;
    color: #666;
    line-height: 36px;
    padding: 5px 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
  }
  .span-color {
    font-size: 14px;
    position: absolute;
    right: 15px;
  }
  .icon-smiley {
    width: 16px;
    height: 16px;
    margin-left: 5px;
  }
}
.card-text {
  line-height: 22px;
  font-size: 14px;
  color: #666;
  & > p {
    margin-bottom: 10px;
    text-indent: 2em;
  }
  ::v-deep .el-link--inner {
    text-indent: 0;
  }
}
</style>
